<template>
	<view class="h-screen flex flex-col">
		<!-- 导航栏 -->
		<uni-nav-bar :title="options.type == 'lesson' ? '课程详情' : '试卷详情'" id="navBar"
			:right-text="options.type == 'lesson' ? '举报' : ''" fixed :color="navColor" statusBar
			:backgroundColor="navBackgroundColor" :border="false" left-icon="left" @clickLeft="Back"
			@clickRight="Report"></uni-nav-bar>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<!-- 头像 -->
				<image :src="info.headimg" class="headimg" mode="widthFix" @error="headimgError"></image>
				<view class="content">
					<!-- 课程信息 -->
					<view class="card info flex flex-col" id="aim">
						<text class="info-title">{{info.name}}</text>
						<view class="flex gap justify-between items-center">
							<!-- 课程标签 -->
							<view class="flex gap" v-if="options.type == 'lesson'">
								<view class="flex gap flex-wrap">
									<text class="label" v-for="e,i in info.labels" :key="i"
										:style="{'--color': e.color}">{{e.name}}</text>
								</view>
								<uni-icons type="heart" v-if="info.mlike" @click="Like" color="#f00" size="42rpx"
									style="transform: translateX(-50%);"></uni-icons>
								<uni-icons type="heart" v-else @click="Like" size="42rpx"
									style="transform: translateX(-50%);"></uni-icons>
							</view>
							<!-- 试卷标签 -->
							<view v-else class="exam-label flex gap- items-center">
								<image
									src="">
								</image>
								<text>{{examType[info.syspat]}}</text>
							</view>
							<!-- 钻石信息 -->
							<view class="flex gap">
								<view class="flex items-center gap-">
									<image class="diamond" src="@/static/icons/red.png"></image>
									<text>
										红钻:
										<text style="color: red;" v-if="options.type == 'lesson'">{{info.redprice}}</text>
										<text style="color: red;" v-else>{{info.reddim}}</text>
									</text>
								</view>
								<view class="flex items-center gap-">
									<image class="diamond" src="@/static/icons/blue.png"></image>
									<text>
										蓝钻:
										<text style="color: blue;" v-if="options.type == 'lesson'">{{info.blueprice}}</text>
										<text style="color: blue;" v-else>{{info.bluedim}}</text>
									</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 课程/试卷详情 -->
					<view class="card flex flex-col gap">
						<view class="flex gap- items-center">
							<image src="@/static/icons/title.png" class="title-icon"></image>
							<text class="lesson-title-des">{{options.type == 'lesson' ? '详情介绍' : '试卷详情'}}</text>
						</view>
						<text class="lesson-des" v-if="options.type == 'lesson'">{{info.describe}}</text>
						<text class="lesson-des forced-line-break" v-else v-html="info.details"></text>
					</view>
					<!-- 占位符 -->
					<!-- <view style="height: 1000px;"></view> -->
					<!-- 占位符 -->
					<view style="height: var(--buy-button-height);"></view>
					<!-- 购买按钮 -->
					<view class="buy-button flex items-center justify-center" @click="BuyClick">
						<text>{{info.mbuy ? `已购买${info.mbuy}次` : '立即购买'}}</text>
						<view class="exam-bottom-bar flex flex-col" v-if="options.type != 'lesson'">
							<view class="flex gap exam-bottom-bar-in">
								<view class="flex flex-col items-center justify-between" @click.stop="BackHome">
									<uni-icons type="home" size="26" color="#333"></uni-icons>
									<text style="font-size: 24rpx;color: #333;">返回首页</text>
								</view>
								<view @click.stop="StartExam" class="exam-start flex-1 flex items-center justify-center">立即测试</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineExpose
	} from 'vue'
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app'
	import config from '@/config/index.js'

	// 导航栏颜色
	const navColor = ref('#fff')
	// 导航栏背景颜色
	const navBackgroundColor = ref('transparent')
	// 课程/试卷信息
	const info = ref({
		title: '介绍人的性格色彩课程',
		labels: [{
				name: '专业',
				color: '111,147,210'
			},
			{
				name: '丰富',
				color: '122,99,167'
			},
			{
				name: '清洗',
				color: '204,132,81'
			}
		],
		redDiamond: 20,
		blueDiamond: 10,
		des: ''
	})
	// 试卷类型
	const examType = ref(['普通试卷', '心理', '星图', '卡牌'])
	// 选项
	const options = ref({
		type: 'lesson',
		id: ''
	})
	// 页面加载
	onLoad(_options => {
		options.value = _options
		// options.value.id = '1348782424770740224'
		// options.value.id = '1329775505213227008'
		// options.value.type = 'exam'
		GetDetails()
	})

	let distance = 0
	// 页面滚动
	onPageScroll(e => {
		if (e.scrollTop == 0) {
			navColor.value = '#fff'
			navBackgroundColor.value = 'transparent'
			return
		}

		const query = uni.createSelectorQuery()

		query.select('#navBar .uni-navbar__content').boundingClientRect()
		query.select('#aim').boundingClientRect()

		query.exec((res) => {
			const nav = res[0]
			const aim = res[1]

			if (!nav || !aim) return

			const newDistance = aim.top - nav.bottom
			if (newDistance > distance) distance = newDistance

			if (aim.top < nav.bottom) {
				navColor.value = '#000'
				navBackgroundColor.value = '#fff'
			} else {
				let currentDistance = aim.top - nav.bottom
				let moveDistance = distance - currentDistance
				let progress = moveDistance / distance
				let color = (1 - progress) * 255
				navColor.value = `rgb(${color}, ${color}, ${color})`
				navBackgroundColor.value = `rgba(255, 255, 255, ${progress})`
			}
		})
	})

	/**
	 * @description 返回上一页
	 */
	function Back() {
		uni.navigateBack()
	}

	/**
	 * @description 返回首页
	 */
	function BackHome() {
		uni.switchTab({
			url: '/pages/tabbar/test'
		})
	}

	/**
	 * @description 跳转到举报页面
	 */
	function Report() {
		if (options.value.type != 'lesson') return
		uni.navigateTo({
			url: `./report?sts=1&rid=${options.value.id}`
		})
	}

	/**
	 * @description 头部图片加载失败
	 * @param {Object} e
	 */
	function headimgError(e) {
		info.value.headimg = `@/static/${options.value.type == 'lesson' ? 'lesson' : 'exam'}-bg.png`
	}

	/**
	 * @description 获取课程详情
	 */
	function GetDetails() {
		let url = config.baseUrl
		if (options.value.type == 'lesson') {
			url += '/app/getCourseinfoByid'
			url += `?course.id=${options.value.id}`
			url += `&member.id=${uni.getStorageSync('user').id}`
		} else {
			url += '/app/getExapaperInfoAtid'
			url += `?id=${options.value.id}`
		}

		uni.request({
			url,
			method: 'POST'
		}).then(res => {
			let {
				data: resData
			} = res
			let {
				data
			} = resData
			info.value = data || {}
			data.id && QueryLike(data.id)
		})
	}

	/**
	 * @description 获取点赞状况
	 */
	function QueryLike(id) {
		console.log({
			'member.id': uni.getStorageSync('user').id,
			pst: 0,
			pid: id
		})
		if (options.value.type != 'lesson') return
		console.log(config.baseUrl + '/app/memberQuerycollect')
		uni.request({
			url: config.baseUrl + '/app/memberQuerycollect',
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {
				'member.id': uni.getStorageSync('user').id,
				pst: 0,
				pid: id
			}
		}).then(res => {
			let {
				data: resData
			} = res
			let {
				data: resData2
			} = resData
			let {
				del
			} = resData2
			info.value.mlike = del == 0
		})
	}

	let likeAble = true
	/**
	 * @description 点赞
	 */
	function Like() {
		if (options.value.type != 'lesson') return
		if (!likeAble) return
		likeAble = false
		uni.request({
			url: config.baseUrl + '/app/memberCollectSet',
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {
				'member.id': uni.getStorageSync('user').id,
				pst: 0,
				pid: options.value.id
			}
		}).then(res => {
			likeAble = true
			info.value.mlike = !info.value.mlike
		})
	}

	/**
	 * @description 购买课程按钮点击事件
	 */
	function BuyClick() {
		if (options.value.type != 'lesson') return
		if (info.value.mbuy) {
			uni.showModal({
				title: '提示',
				content: '您已购买过该课程，是否再次购买',
				success: res => {
					res.confirm && Buy()
				}
			})
		} else {
			Buy()
		}
	}

	/**
	 * @description 购买课程
	 */
	function Buy() {
		uni.showActionSheet({
			itemList: ['红钻购买', '蓝钻购买'],
			success: res => {
				BuyRequest(res.tapIndex)
			}
		})
	}

	/**
	 * @description 购买请求
	 * @param {Object} index
	 */
	function BuyRequest(index) {
		uni.request({
			url: config.baseUrl + '/app/memberBuyCourse?' +
				`member.id=${uni.getStorageSync('user').id}` +
				`&course.id=${options.value.id}` +
				`&buysts=${index}`,
			method: 'POST',
			/* data: {
				'member.id': uni.getStorageSync('user').id,
				'course.id': options.value.id,
				buysts: index
			} */
		}).then(res => {
			GetDetails()
		})
	}

	/**
	 * @description 开始考试
	 */
	function StartExam() {
		uni.navigateTo({
			url: `/pages/test/exam?id=${info.value.id}&title=${info.value.name}`,
		})
	}
</script>

<style>
	page {
		--buy-button-height: 100rpx;
		/* background-image:
			linear-gradient(to bottom,
				transparent 0,
				transparent 38.8%,
				#f2f7fa 38.8%,
				#f2f7fa 100%),
			url(@/static/lesson-bg.png);
		background-position: 0 0, 0 -40rpx;
		background-size: 100% auto; */
	}

	.headimg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.content {
		padding: 332rpx 20rpx 60rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.content::before {
		content: '';
		top: 560rpx;
		left: 0;
		right: 0;
		height: 100vh;
		background: #f2f7fa;
		position: fixed;
		z-index: -1;
	}

	.card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		gap: 20rpx;
	}

	.info {
		box-shadow: 0 2px 2px 1px rgba(49, 158, 255, .5);
	}

	.info-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.gap {
		gap: 20rpx;
	}

	.gap- {
		gap: 10rpx;
	}

	.label {
		color: rgb(var(--color));
		background: rgba(var(--color), .3);
		border-radius: 10rpx;
		font-size: 22rpx;
		line-height: 22rpx;
		padding: 10rpx 10rpx 8rpx;
	}

	.diamond {
		width: 34rpx;
		height: 34rpx;
	}

	.diamond+text {
		font-size: 26rpx;
	}

	.title-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.lesson-title-des {
		font-size: 28rpx;
		font-weight: bold;
	}

	.lesson-des {
		box-sizing: border-box;
		border: 2px dashed #b7d9e3;
		border-radius: 16rpx;
		font-size: 26rpx;
		padding: 20rpx;
	}

	.buy-button {
		position: fixed;
		bottom: 60rpx;
		left: 20rpx;
		right: 20rpx;
		height: var(--buy-button-height);
		background: #319eff;
		border-radius: calc(var(--buy-button-height) / 2);
	}

	.buy-button>text {
		color: #fff;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;
	}

	.exam-label {
		align-self: flex-end;
		background: #e5eef4;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #6d8897;
	}

	.exam-label image {
		width: 26rpx;
		height: 26rpx;
	}

	.exam-label text {
		transform: translateY(2rpx);
	}

	.exam-bottom-bar {
		position: absolute;
		padding: 10rpx 20rpx;
		left: -20rpx;
		top: 0;
		right: -20rpx;
		height: 50vh;
		background: #fff;
		box-shadow: 0 -1px 6px 1px rgba(0, 0, 0, .1);
	}

	.exam-bottom-bar-in {
		height: calc(var(--buy-button-height) - 20rpx + 10rpx);
	}

	.exam-start {
		background: #319eff;
		color: #fff;
		border-radius: 100rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: bold;
	}
</style>